<script setup lang="ts">
import {computed, defineProps} from 'vue'
import {perks_store, staticAssertsStore,perk_style_store} from "@/renderer/main-window/stores/storeAsserts.js";
import {storeSystemCertificateInfo} from "@/renderer/main-window/stores/storeSystemCertificateInfo.js";


const {perkInfo,size} = defineProps({
  "perkInfo":{
  },
  "size":{
    type: Number,
    default: 22
  },

})


const perkSrcFunc=(perkId)=>{
  const uri = staticAssertsStore().getAssertSync({
    "key": perks_store,
    "id": perkId
  })?.iconPath

  if(uri){
    return `${ storeSystemCertificateInfo().getImgProxyPrefix()}${uri}`;
  }else{
    return ''
  }
}

const perkStyleSrcFunc=(perkStyleId)=>{
  const uri = staticAssertsStore().getAssertSync({
    "key": perk_style_store,
    "id": perkStyleId
  })?.iconPath

  if(uri){
    return `${ storeSystemCertificateInfo().getImgProxyPrefix()}${uri}`;
  }else{
    return ''
  }
}



</script>


<template>
<div v-if="perkInfo?.perk0 !== undefined && perkInfo?.perk0 != 0"
    style="display: flex;flex-direction: column">
  <el-image :src="perkSrcFunc(perkInfo?.perk0)"
            fit="cover"
            :style="{
'height':`${size}px`,
'width':`${size}px`,
}"
            loading="lazy"
  />

  <el-image :src="perkStyleSrcFunc(perkInfo?.perkSubStyle)"
            :style="{
'height':`${size}px`,
'width':`${size}px`,
}"
            fit="cover"
  />
</div>

<!--<el-image :src="perkStyleSrcFunc(perkInfo?.perkSubStyle)" :size="size"/>-->
</template>

<style scoped>

</style>